<!-- 
CardComposition.vue
这是一个使用组合式API (Composition API) 创建的卡片组件
组合式API的特点：
- 更好的代码组织和逻辑复用
- 更好的类型推导
- 更小的生产包体积
- 适合大型组件和复杂逻辑
-->
<template>
  <div class="card-composition" :class="{ 'card-composition--expanded': isExpanded }">
    <!-- 卡片头部 -->
    <div class="card-composition__header">
      <!-- 标题插槽 -->
      <slot name="header">
        <h3 class="card-composition__title">{{ title }}</h3>
      </slot>
      <!-- 展开/收起按钮 -->
      <button class="card-composition__toggle" @click="toggleExpand">
        {{ isExpanded ? '收起' : '展开' }}
      </button>
    </div>

    <!-- 卡片内容，使用过渡动画 -->
    <Transition name="fade">
      <div v-show="isExpanded" class="card-composition__content">
        <!-- 默认插槽 -->
        <slot>
          <p>{{ content }}</p>
        </slot>
      </div>
    </Transition>

    <!-- 卡片底部 -->
    <div class="card-composition__footer">
      <!-- 底部插槽 -->
      <slot name="footer">
        <span class="card-composition__time"> 最后更新: {{ formattedTime }} </span>
      </slot>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'

  // 定义 Props 接口
  interface CardProps {
    title: string
    content: string
    lastUpdated: Date | string
  }

  export default defineComponent({
    name: 'CardComposition',

    props: {
      // Props 定义
      title: {
        type: String,
        required: true,
      },
      content: {
        type: String,
        default: '暂无内容',
      },
      lastUpdated: {
        type: [Date, String],
        required: true,
      },
    },

    emits: ['expand', 'collapse'],

    setup(props, { emit }) {
      // 响应式状态
      const isExpanded = ref(false)

      // 计算属性
      const formattedTime = computed(() => {
        const date =
          props.lastUpdated instanceof Date ? props.lastUpdated : new Date(props.lastUpdated)

        return new Intl.DateTimeFormat('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
        }).format(date)
      })

      // 方法
      const toggleExpand = () => {
        isExpanded.value = !isExpanded.value
        emit(isExpanded.value ? 'expand' : 'collapse')
      }

      // 侦听器
      watch(isExpanded, (newValue) => {
        console.log(`卡片${newValue ? '展开' : '收起'}`)
      })

      // 生命周期钩子
      onMounted(() => {
        console.log('CardComposition 组件已挂载')
      })

      onBeforeUnmount(() => {
        console.log('CardComposition 组件即将卸载')
      })

      // 返回模板需要使用的内容
      return {
        isExpanded,
        formattedTime,
        toggleExpand,
      }
    },
  })
</script>

<style scoped>
  .card-composition {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  .card-composition--expanded {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .card-composition__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .card-composition__title {
    margin: 0;
    font-size: 18px;
    color: #333;
  }

  .card-composition__toggle {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .card-composition__toggle:hover {
    background: #f5f5f5;
  }

  .card-composition__content {
    color: green;
    padding: 16px 0;
    border-top: 1px solid #eee;
  }

  .card-composition__footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
    font-size: 12px;
    color: #666;
  }

  .card-composition__time {
    font-style: italic;
  }

  /* 过渡动画 */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 1s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
</style>
